<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <title>日期模块 - layui</title>

    <link rel="stylesheet" href="./assets/dist/css/layui.css" />

    <style>
      body {
        padding: 50px 100px;
      }

      .layui-inline {
        margin-right: 15px;
      }
    </style>
  </head>

  <body>
    <div class="layui-inline">
      <input
        type="text"
        class="layui-input"
        id="test-first"
        placeholder="带遮罩"
      />
    </div>

    <br />
    <hr />

    范围选择1：
    <div class="layui-inline">
      <input type="text" class="layui-input" id="test1" />
    </div>

    <br />
    <hr />

    <div class="layui-form">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">范围选择2</label>
          <div class="layui-inline" id="test1-2">
            <div class="layui-input-inline">
              <input
                type="text"
                autocomplete="off"
                id="test-startDate-1"
                class="layui-input"
                placeholder="开始日期"
              />
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline">
              <input
                type="text"
                autocomplete="off"
                id="test-endDate-1"
                class="layui-input"
                placeholder="结束日期"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <br />
    <hr />

    日期选择器：
    <div class="layui-inline">
      <input type="text" class="layui-input" id="test2" />
    </div>

    开启快捷面板：
    <div class="layui-inline">
      <input type="text" class="layui-input" id="test2-1" />
    </div>

    <br /><br />
    <hr />
    <br />

    年选择器：
    <div class="layui-inline">
      <input type="text" class="layui-input" id="test3" />
    </div>

    年月选择器：
    <div class="layui-inline">
      <input type="text" class="layui-input" id="test4" />
    </div>

    时间时间器：
    <div class="layui-inline">
      <input type="text" class="layui-input" id="test5" />
    </div>

    <br /><br />
    <hr />
    <br />

    时间范围选择
    <div class="layui-inline">
      <input type="text" class="layui-input" id="test55" />
    </div>

    自定义重要日：
    <div class="layui-inline">
      <input type="text" class="layui-input" id="test555" />
    </div>

    标注法定节假日及补班：
    <div class="layui-inline">
      <input type="text" class="layui-input" id="test5555" />
    </div>

    <br /><br />
    <hr />
    <br />

    同时绑定多个：
    <div class="layui-inline">
      <input type="text" class="layui-input test-item" />
    </div>
    <div class="layui-inline">
      <input type="text" class="layui-input test-item" />
    </div>
    <div class="layui-inline">
      <input type="text" class="layui-input test-item" />
    </div>

    <br /><br />
    <hr />
    <br />

    墨绿主题：
    <div class="layui-inline">
      <input type="text" class="layui-input" id="test6-1" />
    </div>

    自定义头部背景色：
    <div class="layui-inline">
      <input type="text" class="layui-input" id="test6-2" />
    </div>

    格子主题：
    <div class="layui-inline">
      <input type="text" class="layui-input" id="test6-3" />
    </div>

    <br /><br />
    <hr />
    <br />

    <button class="layui-btn" id="test7">其它元素触发</button>
    <div class="layui-inline">
      <input type="text" class="layui-input" id="test6" />
    </div>
    <textarea></textarea>
    <button class="layui-btn" id="test9">外部事件触发</button>
    <div class="layui-inline">
      <input type="text" class="layui-input" id="test8" />
    </div>

    <br /><br />
    <hr />
    <br />
    直接嵌套在指定容器中：<br /><br />
    <div class="layui-inline" id="test10"></div>
    <div class="layui-inline" id="test11" style="margin-left: 30px"></div>

    <script
      src="./assets/dist/layui.js"
      src1="http://local.res.layui.com/layui/release/laydate/dist/laydate.js"
      charset="utf-8"
    ></script>
    <script>
      layui.use('laydate', (laydate) => {
        //全局配置
        laydate.set({
          //trigger: 'focus'
        });

        // 第一个任意示例
        laydate.render({
          elem: '#test-first',
          min: 0,
          shade: [0.1, '#000'],
          //max: '2016-12-30',
          done: (...args) => {
            console.log('done', args);
          },
          onConfirm: (...args) => {
            console.log('confirm', args);
          },
          onNow: (...args) => {
            console.log('now', args);
          },
          onClear: (...args) => {
            console.log('clear', args);
          },
        });

        // 范围选择1
        laydate.render({
          elem: '#test1', // 指定元素
          type: 'datetime',
          trigger: 'click',
          // lang: 'en',
          // theme: 'grid',
          range: true, // 开启日期范围，默认使用“-”分割
          // rangeLinked: true,
          // min: '1970-1-1',
          // max: '2021-5-9',
          // value: '2021-05-09 12:06:09',
          // value: '2021-05-08 - 2021-03-27',
          done: (value, date, endDate) => {
            console.log(value, date, endDate);

            //this.elem.val(123);
          },
          change: (value, date, endDate) => {
            console.log(value, date, endDate);
          },
        });

        // return;

        // 范围选择2
        laydate.render({
          elem: '#test1-2',
          type: 'datetime',
          range: ['#test-startDate-1', '#test-endDate-1'],
          rangeLinked: true, // 是否开启日期范围选择时的区间联动标注模式
          // value: ['2022-05-01', '2022-10-01'],
          // value: '2022-05-01 - 2022-06-01',
          done: (value, date, endDate) => {
            console.log(value);
            console.log(date);
            console.log(endDate);
          },
        });

        // 日期选择器（单面板）
        laydate.render({
          elem: '#test2',
          //,format: 'yyyy年MM月dd日'
          value: new Date(1534766888000),
          //,isInitValue: false
          format: 'yyyy/MM/dd',
          min: 7,
          //,max: 0
          //,min: '2016-10-14'
          //,max: -1
          //,value: '1989年10月14日'
          ready: (date) => {
            console.log(date);
          },
          done: (value, date, endDate) => {
            console.log(value, date, endDate);
            //this.elem.val(111111);
          },
          change: (value) => {
            console.log(value);
          },
        });

        // 开启快捷面板
        laydate.render({
          elem: '#test2-1',
          shortcuts: [
            {
              text: '昨天',
              value: (() => {
                var now = new Date();
                now.setDate(now.getDate() - 1);
                return now;
              })(),
            },
            { text: '今天', value: Date.now() },
            {
              text: '明天',
              value: (() => {
                var now = new Date();
                now.setDate(now.getDate() + 1);
                return now;
              })(),
            },
            {
              text: '上个月',
              value: (() => {
                var now = new Date();
                // now.setDate(now.getDate() - 1);
                now.setMonth(now.getMonth() - 1);
                return [now];
              })(),
            },
            {
              text: '上个月的前一天',
              value: (() => {
                var now = new Date();
                now.setMonth(now.getMonth() - 1);
                now.setDate(now.getDate() - 1);
                return [now];
              })(),
            },
            {
              text: '某一天',
              value: '2020-12-12',
            },
          ],
        });

        //年选择器
        laydate.render({
          elem: '#test3',
          type: 'year',
          //,range: true
          //,trigger: 'click'
          //,min:'2021-01-01'
          //,max:'2022-12-31'
          done: (value, date, endDate) => {
            console.log(value, date, endDate);
          },
          change: (value, date, endDate) => {
            //this.elem.val(value)
          },
        });

        //年月选择器
        laydate.render({
          elem: '#test4',
          type: 'month',
          range: true,
          trigger: 'click',
          min: '2022-03-01',
          max: '2022-05-31',
          done: (value, date, endDate) => {
            console.log(value, date, endDate);
          },
          change: function (value, date, endDate) {
            this.elem.val(value);
          },
        });

        //时间选择器
        laydate.render({
          elem: '#test5',
          type: 'time',
          //,range: true
          //,trigger: 'click'
          min: '09:30:00',
          max: '17:30:00',
          done: (value, date, endDate) => {
            console.log(value, date, endDate);
          },
          change: (value, date, endDate) => {
            //this.elem.val(value)
          },
        });

        //时间范围选择器
        laydate.render({
          elem: '#test55',
          type: 'time',
          range: true,
          //,trigger: 'click'
          done: (value, date, endDate) => {
            console.log(value, date, endDate);
          },
        });

        // 同时绑定多个
        laydate.render({
          elem: '.test-item',
          trigger: 'click',
        });
        /*
lay('.test-item').each(function(){
  laydate.render({
    elem: this
    ,trigger: 'click'
  });
});
*/

        //自定义重要日
        var ins555 = laydate.render({
          elem: '#test555',
          //,calendar: true //是否开启公历重要节日
          mark: {
            //标记重要日子
            '0-10-14': '生日', //0代表：每年
            '0-0-15': '中旬',
            '2017-8-20': 'v2',
            '2017-8-31': '月底',
          },
          done: (value, date, endDate) => {
            if (date.year == 2016 && date.month == 10 && date.date == 14) {
              //console.log('Layui 诞生日');
            }
          },
          change: (value, date, endDate) => {
            console.log(value);
          },
        });

        // 标注法定节假日及补班
        laydate.render({
          elem: '#test5555',
          value: '2022-5-21',
          holidays: [
            [
              '2022-1-1',
              '2022-1-2',
              '2022-1-3',
              '2022-1-31',
              '2022-2-1',
              '2022-2-2',
              '2022-2-3',
              '2022-2-4',
              '2022-2-5',
              '2022-2-6',
              '2022-4-3',
              '2022-4-4',
              '2022-4-5',
              '2022-4-30',
              '2022-5-1',
              '2022-5-2',
              '2022-5-3',
              '2022-5-4',
              '2022-6-3',
              '2022-6-4',
              '2022-6-5',
              '2022-9-10',
              '2022-9-11',
              '2022-9-12',
              '2022-10-1',
              '2022-10-2',
              '2022-10-3',
              '2022-10-4',
              '2022-10-5',
              '2022-10-6',
              '2022-10-7',
            ],

            [
              '2022-1-29',
              '2022-1-30',
              '2022-4-2',
              '2022-4-24',
              '2022-5-7',
              '2022-10-8',
              '2022-10-9',
            ],
          ],
        });

        //墨绿主题
        laydate.render({
          elem: '#test6-1', //指定元素
          type: 'datetime',
          theme: 'molv',
          value: 20180115,
          isInitValue: true,
          lang: 'en',
          //,range: true
          trigger: 'click',
        });

        //自定义背景色主题
        laydate.render({
          elem: '#test6-2', //指定元素
          type: 'datetime',
          theme: '#393D49',
          //,range: true
          trigger: 'click',
        });

        //格子主题
        laydate.render({
          elem: '#test6-3', //指定元素
          //,type: 'datetime'
          theme: 'grid',
          //,range: true
          trigger: 'click',
        });

        //其它元素触发
        laydate.render({
          elem: '#test6', //指定元素
          eventElem: '#test7', //绑定执行事件的元素
          lang: 'en',
        });

        //外部事件
        lay('#test9').on('click', (e) => {
          laydate.render({
            elem: '#test8',
            type: 'datetime',
            show: true,
            //,min: '2017-08-12 00:10:00'
            //,max: '2017-08-12 23:10:10'
            closeStop: '#test9', //点击 #test6 所在元素区域不关闭控件
            change: (value, date) => {
              console.log(value, date);
            },
            done: (value, date) => {
              console.log(value, date);
            },
          });
        });

        //直接嵌套在指定容器中
        var ins10 = laydate.render({
          elem: '#test10',
          position: 'static',
          calendar: true, //是否开启公历重要节日
          mark: {
            //标记重要日子
            '2021-8-20': '',
            '2021-8-21': '',
          },
          done: (value, date, endDate) => {
            if (date.year == 2021 && date.month == 8 && date.date == 20) {
              ins10.hint(value + '，活动日');
            }
          },
          change: (value, date, endDate) => {
            console.log(value, date);
          },
        });

        laydate.render({
          elem: '#test11',
          position: 'static',
          lang: 'en',
          type: 'datetime',
          calendar: true, //是否开启公历重要节日
          done: (value, date, endDate) => {
            //console.log(value, date, endDate);
          },
          change: (value, date, endDate) => {
            console.log(value);
          },
        });
      });
    </script>
  </body>
</html>
